import React, { memo } from "react";
import { useDispatch } from "react-redux";
import { shallowEqual, useSelector } from "react-redux";
import { changeIsExpandSlider } from "../../store/actionCreator";

import sty from "./sty.module.css";
import { navMenu } from "../../constans";
import { NavLink, Switch } from "react-router-dom";

import { renderRoutes } from "react-router-config";
const Main = (props) => {
  const { routes } = props;
  const { isExpandSlider, playList } = useSelector(
    (state) => ({
      playList: state.getIn(["playList"]),
      isExpandSlider: state.getIn(["isExpandSlider"]),
    }),
    shallowEqual
  );

  const dispatch = useDispatch();
  const toggleExpand = () => {
    dispatch(changeIsExpandSlider(!isExpandSlider));
  };

  return (
    <div className={sty.root}>
      <div className={sty.header}>
        <i className="icon-weibiaoti12 iconfont" onClick={toggleExpand}></i>
      </div>
      <div className={sty.menu}>
        {navMenu.map((v) => (
          <NavLink activeClassName={sty.active} to={v.path} key={v.path}>
            {v.title}
          </NavLink>
        ))}
      </div>
      <div className={sty.content} style={{ bottom: playList.length ? 60 : 0 }}>
        <Switch>{renderRoutes(routes)}</Switch>
      </div>
      {isExpandSlider && (
        <div className={sty.mask} onClick={toggleExpand}></div>
      )}
    </div>
  );
};
// http://47.99.130.140/react-music/#/my
export default memo(Main);
